import React,{useState} from "react"
// antd
import 'antd/dist/antd.css';
import { Card, Input,Button ,Spin,message } from 'antd';
import {UserOutlined,KeyOutlined} from "@ant-design/icons"
// http
import axios from "../api/axios"
// url
import Url from "../api/url"
// css
import "../style/login.css"
function Login(props){

    const [username , setUserName] = useState('')
    const [password , setPassword] = useState('')
    const [isLoading, setIsLoading] = useState(false)

    const checkLogin = async ()=>{
       
       
        setIsLoading(true)
        // //////////////////////////
        let data;
        await axios.get(Url.login,{"username":username,"password":password}).then(res=>{
            data=res.data
        }).catch(err=>{
            data=err
            setIsLoading(false)
        })
        //////////////////
        if(data.openId){
            setTimeout(()=>{
                setIsLoading(false)
                props.history.push("/admin/home")
            },1000)
            
        }else{
            setIsLoading(false) 
            message.error(data.data)
        }
        
    }
    return (
        <div className="login-div">

        <Spin tip="Loading..." spinning={isLoading}>
            <Card title="后台登录页面" bordered={true} style={{ width: 400 }} >
                <Input
                    id="userName"
                    size="large"
                    placeholder="输入用户名"
                    autoComplete="off"
                    prefix={<UserOutlined style={{color:'rgba(0,0,0,.25)'}}/>}
                    onChange={(e)=>{setUserName(e.target.value)}}
                /> 
                <br/><br/>
                <Input.Password
                    id="password"
                    size="large"
                    placeholder="输入密码"
                    prefix={<KeyOutlined style={{color:'rgba(0,0,0,.25)'}}/>}
                    onChange={(e)=>{setPassword(e.target.value)}}
                />     
                <br/><br/>
                <Button type="primary" size="large" block onClick={checkLogin} > Login in </Button>
            </Card>
        </Spin>
    </div>
    )
}

export default Login